<template>
  <div class="box">
    儿子的文具： {{ toy }} 
    <p>中间组件声明了父组件的name属性，就不会传给childSon组件。父亲汽车是---{{ name }}</p>
    <ChildSon v-bind="$attrs" />
  </div>

</template>

<script lang='ts' setup>
import { ref } from 'vue';
import ChildSon from './ChildSon.vue';

const toy = ref("奥特曼")
defineProps({
  name: {
    type: String,
    default: '儿子'
  }
})

</script>

<style scoped lang='scss'>
.box {
  border: 1px solid #ccc;
  padding: 10px;
  background-color: orange;
  color: white;
  margin-top: 20px;
  min-height: 120px;
}
</style>
